<template>
  <div class="title_box" :style="{color:color}">
       <i :class="icon"></i>
      <span class="ml10" :style="{fontSize:font}">{{title}}</span>
      <span v-if="annotation" class="ml20" :style="{color:annotationColor,fontSize:annotationSize}">注：{{annotation}}</span>
      <div class="right_button_box" v-if="rightBtn">
        <slot></slot>
      </div>
  </div>
</template>

<script>
  export default {
    name:'moudleTitle',
    props:['title','font','color','icon','annotation','annotationColor','annotationSize','rightBtn']
  }
</script>

<style scoped>
  .ml20{margin-left: 20px;}
  .title_box{font-size: 14px;margin: 5px 0 10px 0;color: #0085D0; position: relative;}
  .right_button_box {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
</style>
